<template>
  <div class="container">
    <h2>{{ question.title }}</h2>
    <span>时间限制：{{ question.timeLimit }}(MS)</span>
    &nbsp;&nbsp;
    <span>空间限制：{{ question.memoryLimit }}(MB)</span>
    <div class="content">
      <div class="box">
        <div class="box_head">
          <span>问题描述</span>
        </div>
        <div class="box_content">
          <div class="text " v-html="question.description"></div>
        </div>
      </div>
      <div class="flexBox">
        <div class="box">
          <div class="box_head">
            <span>输入描述</span>
          </div>
          <div class="box_content">
            <p class="text" v-html="question.inputDescription"></p>
          </div>
        </div>
        <div class="box">
          <div class="box_head">
            <span>输出描述</span>
          </div>
          <div class="box_content">
            <p class="text" v-html="question.outputDescription"></p>
          </div>
        </div>
      </div>

      <div class="box" v-if="question.hint != null">
        <div class="box_head">
          <span>提示</span>
        </div>
        <div class="box_content">
          <p class="text" v-html="question.hint"></p>
        </div>
      </div>

      <div
        class="flexBox"
        v-if="question.ioSamples && question.ioSamples.length != 0"
      >
        <div class="box">
          <div class="box_head">
            <span>输入示例</span>
          </div>
          <div class="box_content">
            <p class="text">{{ question.ioSamples[0].inputSample }}</p>
          </div>
        </div>
        <div class="box">
          <div class="box_head">
            <span>输出示例</span>
          </div>
          <div class="box_content">
            <p class="text">{{ question.ioSamples[0].outputSample }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["question"]
};
</script>
<style lang="scss" scoped>
h2 {
  color: #5b8bff;
}
.flexBox {
  width: 100%;
  display: flex;
  flex-direction: row;
  .box{
    flex: 1;
  }
}
.box {
  white-space: pre-line;
  text-align: left;
  border: solid 2px rgba(240, 243, 250, 1);
  .box_head {
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    color: #7c828e;
    background: #edf3ff;
    border-bottom: solid 1px rgba(240, 243, 250, 1);
  }
  .box_content{
    padding-left: 10px;
    overflow: auto;
  }
  margin: 10px 0;
}
</style>
